{% extends "base.html" %}
{% block content %}

    <div class="row">
        {% if err_msg %}
            <div class="col-lg-12">
                <div class="alert alert-danger alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    {{ err_msg|safe }}
                </div>
            </div>
        {% endif %}
        {% if info_msg %}
            <div class="col-lg-12">
                <div class="alert alert-info alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    {{ info_msg|safe }}
                </div>
            </div>
        {% endif %}
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                     留言板
                     <a data-toggle="modal" style="margin-left:5px;float: right" class="btn btn-xs btn-success" href="#modal-form">提交工单</a>
                </div>
                <div class="ibox-content">
                    {{comments_code|safe}}
                </div>
            </div>
        </div>
    </div>
    <div style="display: none;" id="modal-form" class="modal fade" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <form role="form" method="post" action="/submit_feedback">
                            <div class="col-sm-6 b-r"><h3 class="m-t-none m-b">提交一份表单</h3>
                                <p>如果您遇到了任何问题，请及时告知我们，我们会尽快给你处理</p>
                                <label>问题分类</label>
                                <select class="form-control m-b" name="subject">
                                    <option>监工账户问题</option>
                                    <option>迅雷账户问题</option>
                                    <option>其它问题</option>
                                    <option>意见建议</option>
                                </select>
                            </div>
                            <div class="col-sm-6"><h4>问题描述</h4>
                                <div>
                                    <textarea class="form-control message-input" name="content" placeholder="请具体描述您遇到的问题"></textarea>
                                    <button class="btn btn-sm btn-primary pull-right" style="margin: 1em" type="submit"><strong>提交</strong></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js_logic %}
    <script>
        function htmlEncode(value){
          return $('<div/>').text(value).html();
        }
        var reload_data_30_seconds = function(){
            $.getJSON("/get_comments?random="+Math.random(),function(r_data) {
                message="";
                r_data=r_data.messages;
                for(i=0;i<r_data.length;i++){
                    chat = r_data[i];
                    content=htmlEncode(chat.message).replace(/\n/g,"<br/>");
                    content=content.replace(/\[@color=(.*)\](.*)\[\/color\]/g,"<font color='$1'>$2</font>");
                    message=message+
'<div class="chat-message">'+
'    <div class="message">'+
'        <a class="message-author" href="#"> ' + chat.author + ' </a>'+
'        <span class="message-date"> ' + chat.date + ' </span>'+
'        <span class="message-content">' + content + 
'        </span>'+
'    </div>'+
'</div>';
                }
                $('.chat-discussion').html(message);
            });
        };
        $(document).ready(function(){
            reload_data_30_seconds();
            setInterval(reload_data_30_seconds,1000*30);
        });
        $(document).keypress(function(e){
                if(e.ctrlKey && e.which == 13 || e.which == 10) {
                    $('#post_message').submit();
                }
         });
    </script>
{% endblock %}

{% block navibar %}
    <div class="col-lg-10">
        <h2>用户交流</h2>
        <ol class="breadcrumb">
            <li>
                <a href="/">Home</a>
            </li>
            <li class="active">
                <strong>Comments</strong>
            </li>
        </ol>
    </div>
{% endblock %}
{% set active_page = "comments" %}
